<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>服务器监控面板</title>
    <link rel="stylesheet" href="/static/monitor.css">
    <!-- <style>
    </style> -->
</head>

<body>
    <div class="container">
        <div class="nav-container">
            <h1>服务器监控面板</h1>
            <div class="nav-links">
                <a href="{{ request.app.router['index'].url_for() }}">返回文件列表</a>
            </div>
        </div>

        <!-- 项目信息 -->
        <div class="project-info">
            <h3>项目信息</h3>
            <p>存储路径: <span id="project-path">-</span></p>
            <p>文件总数: <span id="project-files-count">0</span> (PDF/EPUB)</p>
        </div>

        <div class="dashboard">
            <!-- CPU 监控 -->
            <div class="card">
                <h2>CPU 使用率</h2>
                <div class="progress-container">
                    <div class="progress-bar" id="cpu-progress"></div>
                    <span id="cpu-value">0%</span>
                </div>
                <div class="info-row">
                    <span>物理核心: <span id="cpu-cores">0</span></span>
                    <span>逻辑核心: <span id="cpu-threads">0</span></span>
                </div>
            </div>

            <!-- 内存 监控 -->
            <div class="card">
                <h2>内存使用</h2>
                <div class="progress-container">
                    <div class="progress-bar" id="mem-progress"></div>
                    <span id="mem-value">0%</span>
                </div>
                <div class="info-row">
                    <span>已用: <span id="mem-used">0</span> GB</span>
                    <span>总计: <span id="mem-total">0</span> GB</span>
                </div>
            </div>

            <!-- 磁盘 监控 -->
            <div class="card">
                <h2>磁盘使用</h2>
                <div class="progress-container">
                    <div class="progress-bar" id="disk-progress"></div>
                    <span id="disk-value">0%</span>
                </div>
                <div class="info-row">
                    <span>已用: <span id="disk-used">0</span> GB</span>
                    <span>总计: <span id="disk-total">0</span> GB</span>
                </div>
                <div class="info-row">
                    <span>路径: <span id="disk-path">-</span></span>
                </div>
            </div>

            <!-- 温度监控 -->
            <div class="card">
                <h2>CPU 温度</h2>
                <div class="progress-container">
                    <div class="temperature-bar" id="cpu-temp-bar"></div>
                    <span id="cpu-temp-value">-</span>
                </div>
                <div class="info-row">
                    <span>当前温度: <span id="cpu-temp">-</span></span>
                </div>
            </div>

            <!-- 网络 监控 -->
            <div class="card">
                <h2>网络流量</h2>
                <div class="network-container">
                    <div class="network-item">
                        <span>上传:</span>
                        <span id="net-sent">0 MB</span>
                    </div>
                    <div class="network-item">
                        <span>下载:</span>
                        <span id="net-recv">0 MB</span>
                    </div>
                </div>
            </div>

            <!-- 系统信息 -->
            <div class="card">
                <h2>系统信息</h2>
                <div class="system-info">
                    <p>启动时间: <span id="boot-time">-</span></p>
                    <p>运行时间: <span id="uptime">-</span></p>
                </div>
            </div>
        </div>

        <div class="update-time">最后更新: <span id="update-time">-</span></div>
    </div>

    <script>
        function updateSystemInfo() {
            fetch('/monitor/system-info')
                .then(response => response.json())
                .then(data => {
                    if (data.status === 'success') {
                        // 更新CPU信息
                        document.getElementById('cpu-value').textContent = data.cpu.percent + '%';
                        document.getElementById('cpu-progress').style.width = data.cpu.percent + '%';
                        document.getElementById('cpu-cores').textContent = data.cpu.cores;
                        document.getElementById('cpu-threads').textContent = data.cpu.threads;

                        // 更新内存信息
                        document.getElementById('mem-value').textContent = data.memory.percent + '%';
                        document.getElementById('mem-progress').style.width = data.memory.percent + '%';
                        document.getElementById('mem-used').textContent = data.memory.used;
                        document.getElementById('mem-total').textContent = data.memory.total;

                        // 更新磁盘信息
                        document.getElementById('disk-value').textContent = data.disk.percent + '%';
                        document.getElementById('disk-progress').style.width = data.disk.percent + '%';
                        document.getElementById('disk-used').textContent = data.disk.used;
                        document.getElementById('disk-total').textContent = data.disk.total;
                        document.getElementById('disk-path').textContent = data.disk.path;

                        // 更新温度信息
                        const cpuTemp = data.temperature.cpu;
                        if (cpuTemp !== null && cpuTemp !== undefined) {
                            document.getElementById('cpu-temp').textContent = cpuTemp + ' °C';
                            document.getElementById('cpu-temp-value').textContent = cpuTemp + ' °C';

                            // 更新温度进度条
                            const bar = document.getElementById('cpu-temp-bar');
                            let percentage = Math.min(100, cpuTemp); // 假设温度范围0-100°C
                            bar.style.width = percentage + '%';

                            // 根据温度动态设置颜色
                            if (cpuTemp > 80) {
                                bar.style.background = '#e74c3c'; // 红色
                            } else if (cpuTemp > 60) {
                                bar.style.background = '#f39c12'; // 橙色
                            } else {
                                bar.style.background = '#3498db'; // 蓝色
                            }
                        } else {
                            document.getElementById('cpu-temp').textContent = 'N/A';
                            document.getElementById('cpu-temp-value').textContent = '不可用';
                        }

                        // 更新网络信息
                        document.getElementById('net-sent').textContent = data.network.sent + ' MB';
                        document.getElementById('net-recv').textContent = data.network.recv + ' MB';

                        // 更新系统信息
                        document.getElementById('boot-time').textContent = data.system.boot_time;
                        document.getElementById('uptime').textContent = data.system.uptime;

                        // 更新项目信息
                        document.getElementById('project-path').textContent = data.project.storage_path;
                        document.getElementById('project-files-count').textContent = data.project.files_count;

                        // 更新最后刷新时间
                        document.getElementById('update-time').textContent = new Date().toLocaleTimeString();
                    } else {
                        console.error('监控数据获取失败:', data.message);
                        document.getElementById('update-time').textContent = '错误: ' + data.message;
                    }
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    document.getElementById('update-time').textContent = '错误: ' + error.message;
                });
        }

        // 初始加载
        updateSystemInfo();

        // 每3秒刷新一次
        setInterval(updateSystemInfo, 3000);
    </script>
</body>

</html>